<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
        }

        header {
            width: 100%;
            height: 60px;
            background-color: #fcc;
            text-align: center;
            line-height: 60px;
        }

        main {
            flex: 1;
            overflow-y: scroll;
        }

        dl {
            width: 100%;
            height: 150px;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }

        dl img {
            width: 120px;
            height: 120px;
            margin: 0 10px;
        }

        dl .num {
            width: 30px;
            height: 30px;
        }

        dl button {
            width: 30px;
            height: 30px;
        }

        dl b {
            margin-right: 10px;
        }

        footer {
            width: 100%;
            height: 60px;
            background-color: #fcc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
        }

        footer b {
            flex: 1;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header>购物车</header>
        <main>
            <!-- v-for渲染部分 -->
            <dl v-for="item in list">
                <input type="checkbox" v-model="item.checked">
                <!-- :src动态数据 -->
                <img :src="item.img" alt="">
                <div>
                    <h3>{{item.text}}</h3>
                    <p>
                        <b>单击:￥{{item.price}}</b>
                        <b>总价:￥{{item.price*item.num}}</b>
                    </p>
                    <div>
                        <button :disabled="item.num<=1" @click="reduceNum(item)">-</button>
                        <input class="num" type="text" v-model="item.num">
                        <button @click="item.num++">+</button>
                    </div>
                </div>
            </dl>
        </main>
        <footer>
            <!-- 全选按钮 -->
            <input type="checkbox" v-model="allCheck" @change="allCheckFn">
            <label>全选</label>
            <b>合计:{{totalPrice}}</b>
            <button :disabled="!btnDisable">去结算:{{totalNum}}</button>
        </footer>
    </div>
</body>
<script src="./vue.js"></script>
<script src="./mock.js"></script>
<script>
    const data = Mock.mock({
        "list|5": [{
            img: "@image(100x100,@color)",
            text: "@ctitle",
            id: "@id",
            num: 1,
            checked: false,
            "price|10-100": 0,
        }]
    })
    const vue = new Vue({
        el: "#app",
        // 存放数据
        data: {
            list: data.list,
            allCheck:false,
            text:'',
            totalPrice:0,
            totalNum:0,
            btnDisable:false
        },
        // 监听器，可以观察
        watch: {
            // text: function (newValue, oldValue) {
            // },
            // 需要写成对象
            list:{
                handler:function(newValue,oldValue){
                    console.log(newValue,oldValue);
                    this.allCheck=newValue.every((v)=>{
                        return v.checked
                    })
                    this.totalPrice=0;
                    this.totalNum=0;
                    // 用于计算总价和总数量
                    newValue.forEach((v) => {
                        if(v.checked){
                            this.totalPrice+=v.price*v.num;
                            this.totalNum+=v.num;
                        }
                    })
                    // some用于计算按钮是否禁用，需要取反
                    this.btnDisable=newValue.some((v)=>{
                        return v.checked;
                    })
                },
                // 深层次的观察数据
                deep:true,
            }
        },
        methods: {
            reduceNum(item) {
                item.num--;
                if (item.num < 1) {
                    item.num = 1;
                }
            },
            allCheckFn(){
                this.list.forEach((v)=>{
                    v.checked=this.allCheck;
                })
            }
        },
    })
</script>

</html>